<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html5 canvas test</title>
<script type="text/javascript" src="../../jslib/jquery-1.6.1.js"></script>
<script>
window.onload = function() {
	new op.draw();
	new op.drawTriangle();
	new op.twiceBeisaierCurve();  //带尾巴的椭圆
	new op.tripleBezierCurve();   //红心
	new op.clutterDraw();   //
	new op.drawStatImg();   //折线统计图
	new op.color();    //四等分为正方形，再做圆的渐变
	
	new op.drawCircle();  //各种圆弧
	new op.rectanglesColor(); //四等分为平水矩形，再做垂直矩形的渐变
	
	new op.drawWord();
}
</script>

<style type="text/css">
canvas {
	border: 1px solid black;
}
</style>
</head>
<body id="body">
	canvas
	<br /> When no styling rules are applied to the canvas it will
	initially be fully transparent.
	<br />
	<canvas id="tutorial" width="150" height="150"></canvas>
	<canvas id="stockGraph" width="150" height="150" style="display: none">
	  current stock price: $3.15 +0.15
	  <img src="../../img/sea.jpg" width="150" height="150" alt="" />
	</canvas>

	<canvas id="triangle" width="150" height="150"></canvas>
	<canvas id="clock" width="150" height="150"></canvas>
	<canvas id="bei" width="150" height="150"></canvas>
	<canvas id="canvas1" width="190" height="175"></canvas>

	<canvas id="color" width="150" height="150"></canvas>
	
	<br/>
	<canvas id="canv" width="150" height="200"></canvas>
	<script type="text/javascript">
		var op = {
			draw : function() {
				var canvas = $('#tutorial')[0];
				var ctx = canvas.getContext("2d");
				if (ctx) {
					ctx.fillStyle = "rgb(200,0,0)";
					ctx.fillRect(10, 10, 55, 50);
					ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
					ctx.fillRect(30, 30, 55, 50);

					ctx.fillRect(90, 90, 50, 50);
					ctx.clearRect(105, 105, 20, 20);
					ctx.strokeRect(110, 110, 10, 10);
				}
			},
			drawTriangle : function() {
				var canvas = $('#triangle')[0];
				var ctx = canvas.getContext("2d");
				if (ctx) {
					//钝角三角形
					ctx.beginPath();
					ctx.moveTo(55, 30); //钝角端点   
					ctx.lineTo(80, 55); //锐角上端点
					ctx.lineTo(80, 5); //锐角下端点
					//fill会用填充出一个实心图形,当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath
					ctx.fill();

					ctx.beginPath();
					ctx.moveTo(5, 5);
					ctx.lineTo(40, 20);
					ctx.lineTo(20, 0);
					ctx.closePath();
					ctx.stroke(); //stroke是绘制图形的边框

					ctx.beginPath();

					//圆心坐标，radius，startAngle， endAngle起末弧度（以 x 轴为基准），anticlockwise 为 true 表示逆时针，反之顺时针。
					ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
					ctx.moveTo(110, 75);
					ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
					ctx.moveTo(65, 65);
					ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
					ctx.moveTo(95, 65);
					ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
					ctx.stroke();
				}
			},
			twiceBeisaierCurve : function() {
				var canvas = $('#clock')[0];
				var ctx = canvas.getContext('2d');
				if (ctx) {
					// Quadratric curves example
					ctx.beginPath();
					ctx.moveTo(75, 25);
					ctx.quadraticCurveTo(25, 25, 25, 62.5);
					ctx.quadraticCurveTo(25, 100, 50, 100);
					ctx.quadraticCurveTo(50, 120, 30, 125);
					ctx.quadraticCurveTo(60, 120, 65, 100);
					ctx.quadraticCurveTo(125, 100, 125, 62.5);
					ctx.quadraticCurveTo(125, 25, 75, 25);
					ctx.stroke();
					
					var array = [
									[25, 25  ],[25, 62.5],
									[25, 100 ],[50, 100],
									[50, 120 ],[30, 125],
									[60, 120 ],[65, 100],
									[125, 100],[125, 62.5],
									[125, 25 ],[75, 25]
								];
					
					new op.observeDrawBezierCurve(ctx,array);
				}
			},
			tripleBezierCurve : function() { // drwa Heart
				// Bezier curves example
				var bei = $('#bei')[0];
				var ctx = bei.getContext('2d');
				if (ctx) {
					ctx.beginPath();
					ctx.fillStyle = "rgb(255,6,2)";
					ctx.moveTo(75, 40);
					ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
					ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
					ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
					ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
					ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
					ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
					ctx.fill();

					var array = [
									[75, 37  ],[70, 25  ],[50, 25],
									[20, 25  ],[20, 62.5],[20, 62.5],
									[20, 80  ],[40, 102 ],[75, 120],
									[110,102 ],[130, 80 ],[130, 62.5],
									[130,62.5],[130, 25 ],[100, 25],
									[85, 25  ],[75, 37  ],[75, 40]
								];
					
					new op.observeDrawBezierCurve(ctx,array);
				}
			},
			observeDrawBezierCurve : function(ctx,array){
				ctx.beginPath();
				ctx.fillStyle = "rgb(255,6,2)";
				for(var i = 0; i < array.length; i++){
					var val = array[i];
					ctx.moveTo(val[0], val[1]);
					ctx.arc(val[0], val[1], 1, 0, Math.PI * 2, true);					
				}
				ctx.stroke();
			},
			clutterDraw : function() {
				var ctx = $('#canvas1')[0].getContext('2d');
				new op.roundedRect(ctx, 12, 12, 150, 150, 15);
				new op.roundedRect(ctx, 19, 19, 150, 150, 9);
				new op.roundedRect(ctx, 53, 53, 49, 33, 10);
				new op.roundedRect(ctx, 53, 119, 49, 16, 6);
				new op.roundedRect(ctx, 135, 53, 49, 33, 10);
				new op.roundedRect(ctx, 135, 119, 25, 49, 10);

				ctx.beginPath();
				ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); //chiensexu  本来是true呵呵，反了
				ctx.lineTo(31, 37);
				ctx.fill();
				for (i = 0; i < 8; i++) {
					ctx.fillRect(51 + i * 16, 35, 4, 4);
				}
				for (i = 0; i < 6; i++) {
					ctx.fillRect(115, 51 + i * 16, 4, 4);
				}
				for (i = 0; i < 8; i++) {
					ctx.fillRect(51 + i * 16, 99, 4, 4);
				}
				ctx.beginPath();
				ctx.moveTo(83, 116);
				ctx.lineTo(83, 102);
				ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
				ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
				ctx.lineTo(111, 116);
				ctx.lineTo(106.333, 111.333);
				ctx.lineTo(101.666, 116);
				ctx.lineTo(97, 111.333);
				ctx.lineTo(92.333, 116);
				ctx.lineTo(87.666, 111.333);
				ctx.lineTo(83, 116);
				ctx.fill();
				ctx.fillStyle = "white";
				ctx.beginPath();
				ctx.moveTo(91, 96);
				ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
				ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
				ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
				ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
				ctx.moveTo(103, 96);
				ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
				ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
				ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
				ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
				ctx.fill();
				ctx.fillStyle = "black";
				ctx.beginPath();
				ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
				ctx.fill();
				ctx.beginPath();
				ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
				ctx.fill();
			},
			roundedRect : function(ctx, x, y, width, height, radius) {
				ctx.beginPath();
				ctx.moveTo(x, y + radius);
				ctx.lineTo(x, y + height - radius);
				ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
				ctx.lineTo(x + width - radius, y + height);
				ctx.quadraticCurveTo(x + width, y + height, x + width, y
						+ height - radius);
				ctx.lineTo(x + width, y + radius);
				ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
				ctx.lineTo(x + radius, y);
				ctx.quadraticCurveTo(x, y, x, y + radius);
				ctx.stroke();
			},

			drawStatImg : function() {
				$("<canvas/>")
					.attr("height","150px")
					.attr("width","200px")
					.attr("id","lineStat")
					.appendTo(document.body);				
				
				var ctx = $('#lineStat')[0].getContext('2d');
				var img = new Image();
				img.src = '../../img/backdrop.png';
				img.onload = function() {
					ctx.drawImage(img, 10, 10);
					//rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。
					ctx.strokeStyle = "rgba(255,0,0,0.2)";
					ctx.beginPath();
					ctx.moveTo(38, 105);
					ctx.lineTo(75, 96);
					ctx.lineTo(103, 76);
					ctx.lineTo(120, 50);
					ctx.lineTo(170, 15);
					
					ctx.stroke();
					
					ctx.beginPath();
					ctx.moveTo(38, 105);
					ctx.arc(38, 105, 1, 0, Math.PI * 2, true);
					ctx.moveTo(75, 96 );
					ctx.arc(75, 96, 1, 0, Math.PI * 2, true);
					ctx.moveTo(103, 76);
					ctx.arc(103, 76, 1, 0, Math.PI * 2, true);
					ctx.moveTo(120, 50);
					ctx.arc(120, 50, 1, 0, Math.PI * 2, true);
					ctx.moveTo(170, 15);
					ctx.arc(170, 15, 1, 0, Math.PI * 2, true);
					ctx.stroke();
				}
			},
			color : function(){
				var ctx = $('#color')[0].getContext('2d');
				  // draw background
				  ctx.fillStyle = '#FD0';
				  ctx.fillRect(0,0,75,75);
				  ctx.fillStyle = '#6C0';
				  ctx.fillRect(75,0,75,75);
				  ctx.fillStyle = '#09F)';
				  ctx.fillRect(0,75,75,75);
				  ctx.fillStyle = '#F30';
				  ctx.fillRect(75,75,150,150);
				  ctx.fillStyle = '#FFF';

				  // set transparency value
				  ctx.globalAlpha = 0.2;

				  // Draw semi transparent circles
				  for (i=0;i<7;i++){
				      ctx.beginPath();
				      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
				      ctx.fill();
				  }				
			},
			drawCircle : function(){
				var canvas = $("#canv")[0];
				
				// Make sure we don't execute when canvas isn't supported
				if (canvas.getContext){
					// use getContext to use the canvas for drawing
					var ctx = canvas.getContext('2d');
			
					// Draw shapes
					for (i=0;i<4;i++){
						for(j=0;j<3;j++){
							ctx.beginPath();
							var x          = 25+j*50;               // x coordinate
							var y          = 25+i*50;               // y coordinate
							var radius     = 20;                    // Arc radius
							var startAngle = 0;                     // Starting point on circle
							var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle
							var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise
					
							ctx.arc(x,y,radius,startAngle,endAngle, clockwise);
					
							if (i>1){
								ctx.fill();
							} else {
								ctx.stroke();
							}
						}
					}
				} else {
					alert('You need Safari or Firefox 1.5+ to see this demo.');
				}
			},
			//矩形颜色渐变
			rectanglesColor : function(){
				var c = $("<canvas/>")
				.attr("id","rectColor")
				.attr("width","150px").attr("height","150px").css("margin-left","10px")
				.appendTo(document.body);
				
				var ctx = c[0].getContext('2d')
				
				if(ctx){
					 // Draw background
					 ctx.fillStyle = 'rgb(255,221,0)';
					 ctx.fillRect(0,0,150,37.5);
					 ctx.fillStyle = 'rgb(102,204,0)';
					 ctx.fillRect(0,37.5,150,37.5);
					 ctx.fillStyle = 'rgb(0,153,255)';
					 ctx.fillRect(0,75,150,37.5);
					 ctx.fillStyle = 'rgb(255,51,0)';
					 ctx.fillRect(0,112.5,150,37.5);
					 
					  // Draw semi transparent rectangles
					 for (var i=0;i<10;i++){
					    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
					    for (var j=0;j<4;j++){
					      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
					    }
					 }
				}
			},
			drawWord : function(){
				var c = $("<canvas/>")
				.attr("id","word")
				.attr("width","150px").attr("height","150px").css("margin-left","10px")
				.appendTo(document.body);
				
				var ctx = c[0].getContext('2d')						 
				ctx.shadowOffsetX = 2;
				ctx.shadowOffsetY = 2;
				ctx.shadowBlur = 2;
				ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
				  
				ctx.font = "20px Times New Roman";
				ctx.fillStyle = "Black";
				ctx.fillText("Sample String", 5, 30);
			}
		};
	</script>
</body>
</html>